<template>
  <div id="qHead"  v-if="headshow">
    <a href="/" class="qhead-logo"><img src="@/assets/img/logo.svg" alt=""></a>
    <ul class="qhead-list">
      <li>
        <el-link
            :underline="false"
            :class="{'li-item':true,focus:navFocus.home}"
            @click="to('/')">
          首页
        </el-link>
      </li>
      <li>
        <el-link
            :underline="false"
            :class="{'li-item':true,focus:navFocus.hot}"
            @click="to('/hot')">
          沸点
        </el-link>
      </li>
      <li>
        <el-link :underline="false" class="li-item">咨询</el-link>
      </li>
      <li>
        <el-link :underline="false" class="li-item">小册</el-link>
      </li>
      <li>
        <el-link :underline="false" class="li-item">活动</el-link>
      </li>
      <li>
        <el-link :underline="false" class="li-item last-li">开发者大会</el-link>
      </li>
    </ul>
    <div class="qhead-search">
      <div class="qsearch-box">
        <input type="text" placeholder="探索掘金" class="qsearch">
        <i class="el-icon-search"></i>
      </div>
      <button class="qcreate">创作者中心</button>
      <div id="qwrite-box">
        <button class="qwrite qwri-button" @click="to('/editor')">写文章</button>
        <button class="qdown qwri-button" @click="openWrite()"><i class="el-icon-arrow-down"></i></button>
        <div
            :class="{'write-hot':true,'showhot':display.write}"
            @click="closeWrite($event)">
          <a href="#">发布沸点</a>
        </div>
      </div>
      <button class="login" @click="$store.commit('changeLogBoxOpen')" v-if="!isloged">登录</button>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966

      <el-popover
          v-else
          placement="bottom-start"
          width="120"
          trigger="click">
        <img src="@/assets/img/headicon.jpg" slot="reference" alt="头像" class="headicon">
        <ul class="login-info">
          <li>
            <i class="el-icon-user"></i>
            <span>{{userdata.name}}</span>
          </li>
          <li @click="logout">
            <i class="el-icon-turn-off"></i>
            <span>退出登录</span>
          </li>
        </ul>
      </el-popover>
<<<<<<< HEAD

=======
=======
      <img v-else src="@/assets/img/headicon.jpg" alt="头像" class="headicon">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    </div>
  </div>
</template>

<script>
export default {
  name: "qHead",
  data() {
    return {
      headshow:true,
      isloged:false,
      display: {
        islog: true,
        write:true
      },
      navFocus:{
        home:true,
        hot:false
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      },
      userdata:this.$getSession()
    }
  },
  methods:{
    logout(){
      this.$confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '仍要退出',
        cancelButtonText: '保持登录',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已退出登录'
        });
        this.$deleteSession()
        this.$router.go(0)
      })
    },
<<<<<<< HEAD

=======
=======
      }
    }
  },
  methods:{
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    openWrite(){
      if(this.display.write===true ){
        this.display.write = false
      }else{
        this.display.write = true
      }
    },
    closeWrite(){
      this.$store.commit('changHotBoxOpen')
    },
    to(router){
      this.$toRouter(router)
    }
  },
  mounted() {
    this.$getSession()?this.isloged=true:this.isloged=false
  },
  watch:{
    $route:{
      handler(val){
        val.name==='editor'?this.headshow = false:this.headshow = true
        val.name==='Home'?this.navFocus.home = true:this.navFocus.home = false
        val.name==='hot'?this.navFocus.hot = true:this.navFocus.hot = false
      },
      deep:true
    }
  }
}
</script>

<style>
#qHead {
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /*设置定位为fixed之后，弹出层会全屏变黑*/
  position: fixed;
  top: 0;
  z-index: 3;
  box-shadow: 0 0 5px #f0f0f0;
}
.qhead-list li .focus{
  color: #007fff;
}
.qhead-logo {
  /*margin-left: 3.5rem;*/
}

.qhead-logo img {
  height: 100%;
  width: auto;
}

#qHead .qhead-list {
  margin-left: 0.2rem;
  display: flex;
  flex-shrink: 0;
}

.li-item {
  font-size: 16px;
  padding: 0 0.2rem;
  color: #86909C;
}

.li-item:hover {
  color: #1e80ff !important;
}

.last-li {
  font-weight: bold;
}

.last-li ::after {
  content: '2021';
  display: block;
  position: absolute;
  font-size: 10px;
  color: #61A2E8;
  top: -10px;
  right: -10px;
}

.qhead-search {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.qsearch-box {
  position: relative;
}

.qsearch {
  width: 160px;
  height: 30px;
  border: none;
  background-color: #F4F5F5;
  outline: none;
  text-indent: 1em;
}

.el-icon-search {
  color: #86909C;
  position: absolute;
  right: 0.1rem;
  line-height: 30px;
}

.qcreate {
  width: 100px;
  height: 30px;
  border: none;
  background-color: #E8F3FF;
  color: #1e80ff;
  margin-left: 25px;
  cursor: pointer;
}

#qwrite-box {
  margin-left: 25px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.qwri-button {
  height: 32px;
  border: none;
  background-color: #1E80FF;
  color: #fff;
  line-height: 30px;
  cursor: pointer;
}

.qwri-button:hover {
  background-color: #0876E4;
}

.qwrite {
  width: 70px;
  border-radius: 3px 0 0 3px;
}

.qdown {
  width: 30px;
  border-radius: 0 5px 5px 0;
  border-left: 1px solid #358DFF;
}

.write-hot {
  position: absolute;
  top: 30px;
  width: 99px;
  height: 35px;
  background-color: #fff;
  line-height: 30px;
  text-indent: 0.8em;
  box-shadow: 0 1px 2px 0 #00000080;
}
.showhot{
  visibility: hidden;
}

.write-hot:hover {
  background-color: #f9f9f9;
}

.write-hot a {
  color: #3b76c5;
  font-size: 14px;
  text-decoration: none;
  text-indent: 1em;
}

.login {
  margin-left: 0.25rem;
  height: 32px;
  width: 75px;
  color: #007fff;
  border: 1px solid #007fff;
  border-radius: 2px;
  background-color: transparent;
  cursor: pointer;
}


.qlog-foot span {
  color: #007fff;
  font-size: 14px;
  cursor: pointer;
}

.qlog-foot p {
  color: #767676;
  font-size: 14px;
}

.qlog-foot p a {
  color: #007fff;
  text-decoration: none;
}
.headicon{
  width: 30px;
  height: 30px;
  margin-left: 25px;
  border-radius: 50%;
  cursor: pointer;
}
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
.login-info li{
  color: #4e5969;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.login-info li:hover{
  background-color: #F8F8F8;
}
.login-info li i{
  padding: 0 5px;
  font-size: 16px;
}
<<<<<<< HEAD

=======
=======

>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
</style>